<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>防抖函数</title>
		<style type="text/css">
			.output {
				background: #00BFFF;
				opacity: 0.5;
			}
		</style>
	</head>
	<body>
		<input id='search' type="text" placeholder="请输入内容" />
		<div id="searchCon" class="output"></div>
		<script type="text/javascript">
//防抖函数的总结
// 
// 非立即执行:，如果你在一个事件触发的n秒内又触发了这个事件，那我就以新的事件的时间为准，n 秒后才执行
// 立即执行：我不希望非要等到事件停止触发后才执行，我希望立刻执行函数，然后等到停止触发 n 秒后，才可以重新触发执行
// 我们可以按照立即执行和非立即执行这两个需求去理解我们的防抖函数

			function debounce(fn, wait = 50, immediate = false) {
				let timeout = null;
				let result = null;
				let debounced = function() {
					// 获取参数
					let args = arguments;
					// this
					let context = this;
					// 如果存在,清除定时器
					if (timeout) clearTimeout(timeout);
					// 如果首次执行
					if (immediate && !timeout) {
						result = fn.apply(context, args);
					}
					timeout = setTimeout(function() {
						result = fn.apply(context, args);
						console.log(result);
					}, wait)
				}
				// 取消事件
				debounced.cancel = function() {
					clearTimeout(timeout)
					timeout = null
				}
				return debounced;
			}
		</script>
		<script type="text/javascript">
			var search = document.querySelector("#search");
			var searchCon = document.querySelector("#searchCon")

			function output(e) {
				console.log(e.target.value);
				searchCon.innerHTML = e.target.value
				return searchCon.innerHTML
			}

			search.addEventListener('keyup', debounce(output, 1000, true))
		</script>
	</body>
</html>
